<template>
  <div>
    <el-container>
      <SidebarMenu
        :default-active="activeMenu"
        @goToRoleManagement="goToRoleManagement"
        @goToMenuManagement="goToMenuManagement"
        @goToPermissionControl="goToPermissionControl"
        @goToSystemSetting="goToSystemSetting"
        @goToLogManagement="goToLogManagement"
        @goToFileManagement="goToFileManagement"
        @goToArticleManagement="goToArticleManagement"
        @goToUserInfoManagement="goToUserInfoManagement"
      />

      <el-container>
        <el-header>
          <Navbar title="文章管理" :avatar="currentAvatar" />

        </el-header>

        <el-main>
          <!-- 查询表单 -->
          <el-card class="query-card" shadow="never">
            <el-form :inline="true" :model="queryForm">
              <el-form-item label="文章标题">
                <el-input v-model="queryForm.title" placeholder="请输入文章标题" />
              </el-form-item>
              <el-form-item label="文章分类">
                <el-select v-model="queryForm.categoryId" placeholder="请选择分类" clearable>
                  <el-option 
                    v-for="category in categories" 
                    :key="category.id" 
                    :label="category.name" 
                    :value="category.id" 
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="文章状态">
                <el-select v-model="queryForm.status" placeholder="请选择状态" clearable>
                  <el-option label="草稿" value="draft" />
                  <el-option label="已发布" value="published" />
                  <el-option label="已下线" value="offline" />
                </el-select>
              </el-form-item>
              <el-form-item label="作者">
                <el-input v-model="queryForm.authorName" placeholder="请输入作者姓名" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchArticles">查询</el-button>
                <el-button @click="resetQueryForm">重置</el-button>
                <el-button type="success" @click="showCreateDialog">新增文章</el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 统计信息 -->
          <el-row :gutter="20" class="statistics-row">
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.totalArticles }}</div>
                  <div class="statistics-label">总文章数</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.publishedArticles }}</div>
                  <div class="statistics-label">已发布</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.draftArticles }}</div>
                  <div class="statistics-label">草稿</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.totalViews }}</div>
                  <div class="statistics-label">总阅读量</div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 文章表格 -->
          <el-card class="article-table-card">
            <template #header>
              <div class="card-header">
                <span>文章列表</span>
                <div class="header-actions">
                  <el-button type="warning" size="small" @click="batchOffline">批量下线</el-button>
                  <el-button type="danger" size="small" @click="batchDelete">批量删除</el-button>
                </div>
              </div>
            </template>

            <el-table :data="articles" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="title" label="文章标题" min-width="200">
                <template #default="scope">
                  <div class="article-title">
                    <span v-if="scope.row.isTop" class="top-badge">置顶</span>
                    <span v-if="scope.row.isRecommend" class="recommend-badge">推荐</span>
                    {{ scope.row.title }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="categoryName" label="分类" width="120">
                <template #default="scope">
                  <el-tag type="info">{{ scope.row.categoryName }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="authorName" label="作者" width="100" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="getStatusType(scope.row.status)">
                    {{ getStatusLabel(scope.row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="viewCount" label="阅读量" width="100" />
              <el-table-column prop="likeCount" label="点赞数" width="100" />
              <el-table-column prop="commentCount" label="评论数" width="100" />
              <el-table-column prop="publishedAt" label="发布时间" width="160">
                <template #default="scope">
                  {{ formatDateTime(scope.row.publishedAt) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" fixed="right">
                <template #default="scope">
                  <el-button type="text" size="small" @click="viewArticle(scope.row)">查看</el-button>
                  <el-button type="text" size="small" @click="editArticle(scope.row)">编辑</el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="toggleTop(scope.row)"
                    :class="{ 'is-top': scope.row.isTop }"
                  >
                    {{ scope.row.isTop ? '取消置顶' : '置顶' }}
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="toggleRecommend(scope.row)"
                    :class="{ 'is-recommend': scope.row.isRecommend }"
                  >
                    {{ scope.row.isRecommend ? '取消推荐' : '推荐' }}
                  </el-button>
                  <el-button type="text" size="small" @click="deleteArticle(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination

                :page-sizes="[10, 20, 50, 100]"
                :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>

    <!-- 新增/编辑文章对话框 -->
    <el-dialog v-model="articleDialogVisible" :title="dialogTitle" width="80%" top="5vh">
      <el-form :model="articleForm" :rules="articleRules" ref="articleFormRef" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="文章标题" prop="title">
              <el-input v-model="articleForm.title" placeholder="请输入文章标题" />
            </el-form-item>
            <el-form-item label="文章分类" prop="categoryId">
              <el-select v-model="articleForm.categoryId" placeholder="请选择分类">
                <el-option 
                  v-for="category in categories" 
                  :key="category.id" 
                  :label="category.name" 
                  :value="category.id" 
                />
              </el-select>
            </el-form-item>
            <el-form-item label="文章摘要" prop="summary">
              <el-input
                v-model="articleForm.summary"
                type="textarea"
                :rows="3"
                placeholder="请输入文章摘要"
              />
            </el-form-item>
            <el-form-item label="文章内容" prop="content">
              <el-input
                v-model="articleForm.content"
                type="textarea"
                :rows="15"
                placeholder="请输入文章内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="文章状态" prop="status">
              <el-select v-model="articleForm.status" placeholder="请选择状态">
                <el-option label="草稿" value="draft" />
                <el-option label="发布" value="published" />
              </el-select>
            </el-form-item>
            <el-form-item label="文章标签">
              <el-input v-model="articleForm.tags" placeholder="请输入标签，用逗号分隔" />
            </el-form-item>
            <el-form-item label="封面图片">
              <el-input v-model="articleForm.coverImage" placeholder="请输入封面图片URL" />
            </el-form-item>
            <el-form-item label="SEO标题">
              <el-input v-model="articleForm.seoTitle" placeholder="请输入SEO标题" />
            </el-form-item>
            <el-form-item label="SEO关键词">
              <el-input v-model="articleForm.seoKeywords" placeholder="请输入SEO关键词" />
            </el-form-item>
            <el-form-item label="SEO描述">
              <el-input
                v-model="articleForm.seoDescription"
                type="textarea"
                :rows="3"
                placeholder="请输入SEO描述"
              />
            </el-form-item>
            <el-form-item label="排序权重">
              <el-input-number v-model="articleForm.sortWeight" :min="0" :max="999" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="articleDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveArticle">保存</el-button>
          <el-button type="success" @click="publishArticle" v-if="articleForm.status === 'draft'">发布</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 文章预览对话框 -->
    <el-dialog v-model="previewDialogVisible" title="文章预览" width="70%" top="5vh">
      <div class="article-preview">
        <h1>{{ selectedArticle.title }}</h1>
        <div class="article-meta">
          <span>作者：{{ selectedArticle.authorName }}</span>
          <span>分类：{{ selectedArticle.categoryName }}</span>
          <span>发布时间：{{ formatDateTime(selectedArticle.publishedAt) }}</span>
          <span>阅读量：{{ selectedArticle.viewCount }}</span>
        </div>
        <div class="article-content" v-html="selectedArticle.content"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import SidebarMenu from './SidebarMenu.vue';
import Navbar from './CommonNavbar.vue';
import api from '../utils/request.js';

const router = useRouter();
const activeMenu = ref('4-1'); // 文章管理菜单项
const loading = ref(false);
const articleDialogVisible = ref(false);
const previewDialogVisible = ref(false);
const selectedArticle = ref({});
const selectedRows = ref([]);
const articleFormRef = ref();


// 查询表单
const queryForm = ref({
  title: '',
  categoryId: '',
  status: '',
  authorName: ''
});

// 分类列表
const categories = ref([]);

// 分页
const pagination = ref({
  currentPage: 1,
  pageSize: 20,
  total: 0
});

// 统计信息
const statistics = ref({
  totalArticles: 156,
  publishedArticles: 89,
  draftArticles: 45,
  totalViews: 12580
});

// 文章表单
const articleForm = ref({
  title: '',
  content: '',
  summary: '',
  categoryId: '',
  categoryName: '',
  tags: '',
  status: 'draft',
  coverImage: '',
  seoTitle: '',
  seoKeywords: '',
  seoDescription: '',
  sortWeight: 0
});

// 表单验证规则
const articleRules = {
  title: [
    { required: true, message: '请输入文章标题', trigger: 'blur' }
  ],
  categoryId: [
    { required: true, message: '请选择文章分类', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入文章内容', trigger: 'blur' }
  ]
};

// 文章数据
const articles = ref([
  {
    id: 1,
    title: 'Vue3 组合式API最佳实践',
    content: 'Vue3的组合式API为我们提供了更灵活的代码组织方式...',
    summary: '本文介绍了Vue3组合式API的使用方法和最佳实践',
    categoryId: 'tech',
    categoryName: '技术文章',
    tags: 'Vue3,JavaScript,前端',
    status: 'published',
    authorName: '张三',
    coverImage: 'https://example.com/cover1.jpg',
    viewCount: 1250,
    likeCount: 89,
    commentCount: 23,
    publishedAt: '2024-01-15 10:30:00',
    isTop: true,
    isRecommend: true,
    sortWeight: 100
  },
  {
    id: 2,
    title: '企业数字化转型指南',
    content: '数字化转型是企业发展的必然趋势...',
    summary: '详细介绍了企业数字化转型的步骤和注意事项',
    categoryId: 'industry',
    categoryName: '行业动态',
    tags: '数字化转型,企业管理',
    status: 'published',
    authorName: '李四',
    coverImage: 'https://example.com/cover2.jpg',
    viewCount: 890,
    likeCount: 56,
    commentCount: 12,
    publishedAt: '2024-01-14 15:20:00',
    isTop: false,
    isRecommend: true,
    sortWeight: 80
  },
  {
    id: 3,
    title: '新产品功能介绍',
    content: '我们很高兴地宣布推出全新的产品功能...',
    summary: '介绍最新产品的核心功能和优势',
    categoryId: 'product',
    categoryName: '产品介绍',
    tags: '产品介绍,新功能',
    status: 'draft',
    authorName: '王五',
    coverImage: 'https://example.com/cover3.jpg',
    viewCount: 0,
    likeCount: 0,
    commentCount: 0,
    publishedAt: null,
    isTop: false,
    isRecommend: false,
    sortWeight: 50
  }
]);

// 计算属性
const dialogTitle = computed(() => {
  return articleForm.value.id ? '编辑文章' : '新增文章';
});

// 导航方法
const goToRoleManagement = () => {
  router.push('/RoleManagement');
};

const goToMenuManagement = () => {
  router.push('/MenuManagement');
};

const goToPermissionControl = () => {
  router.push('/PermissionControl');
};

const goToSystemSetting = () => {
  router.push('/system');
};

const goToLogManagement = () => {
  router.push('/LogManagement');
};

const goToFileManagement = () => {
  router.push('/FileManagement');
};

const goToArticleManagement = () => {
  router.push('/ArticleManagement');
};

const goToUserInfoManagement = () => {
  router.push('/UserInfoManagement');
};

// 查询方法
const searchArticles = async () => {
  loading.value = true;
  try {
    const params = {
      page: pagination.value.currentPage,
      pageSize: pagination.value.pageSize
    };

    if (queryForm.value.title) {
      params.title = queryForm.value.title.trim();
    }
    if (queryForm.value.categoryId) {
      params.categoryId = queryForm.value.categoryId;
    }
    if (queryForm.value.status) {
      params.status = queryForm.value.status;
    }
    if (queryForm.value.authorName) {
      params.authorName = queryForm.value.authorName.trim();
    }

    const response = await api.get('/api/article/list', { params });
    
    if (response.data.success) {
      articles.value = response.data.data.items.map(article => ({
        id: article.id || article.Id,
        title: article.title || article.Title,
        content: article.content || article.Content,
        summary: article.summary || article.Summary,
        categoryId: article.categoryId || article.CategoryId,
        categoryName: article.categoryName || article.CategoryName,
        tags: article.tags || article.Tags,
        status: article.status || article.Status,
        authorId: article.authorId || article.AuthorId,
        authorName: article.authorName || article.AuthorName,
        coverImage: article.coverImage || article.CoverImage,
        viewCount: article.viewCount || article.ViewCount || 0,
        likeCount: article.likeCount || article.LikeCount || 0,
        commentCount: article.commentCount || article.CommentCount || 0,
        publishedAt: article.publishedAt || article.PublishedAt,
        seoTitle: article.seoTitle || article.SeoTitle,
        seoKeywords: article.seoKeywords || article.SeoKeywords,
        seoDescription: article.seoDescription || article.SeoDescription,
        isTop: article.isTop || article.IsTop || false,
        isRecommend: article.isRecommend || article.IsRecommend || false,
        sortWeight: article.sortWeight || article.SortWeight || 0,
        createdAt: article.createdAt || article.CreatedAt,
        updatedAt: article.updatedAt || article.UpdatedAt
      }));
      
      pagination.value.total = response.data.data.totalCount;
      ElMessage.success(`查询成功，共找到 ${pagination.value.total} 条记录`);
    } else {
      ElMessage.error(response.data.message || '查询失败');
    }
  } catch (error) {
    console.error('查询文章失败:', error);
    ElMessage.error('查询失败，请检查网络连接');
  } finally {
    loading.value = false;
  }
};

const resetQueryForm = () => {
  queryForm.value = {
    title: '',
    categoryId: '',
    status: '',
    authorName: ''
  };
};

// 显示新增对话框
const showCreateDialog = () => {
  articleForm.value = {
    title: '',
    content: '',
    summary: '',
    categoryId: '',
    categoryName: '',
    tags: '',
    status: 'draft',
    coverImage: '',
    seoTitle: '',
    seoKeywords: '',
    seoDescription: '',
    sortWeight: 0
  };
  articleDialogVisible.value = true;
};

// 编辑文章
const editArticle = (article) => {
  articleForm.value = { ...article };
  articleDialogVisible.value = true;
};

// 保存文章
const saveArticle = async () => {
  try {
    await articleFormRef.value.validate();
    
    const requestData = {
      title: articleForm.value.title,
      content: articleForm.value.content,
      summary: articleForm.value.summary,
      categoryId: articleForm.value.categoryId,
      tags: articleForm.value.tags,
      status: articleForm.value.status,
      authorId: articleForm.value.authorId || '00000000-0000-0000-0000-000000000001', // 临时使用默认作者ID
      coverImage: articleForm.value.coverImage,
      seoTitle: articleForm.value.seoTitle,
      seoKeywords: articleForm.value.seoKeywords,
      seoDescription: articleForm.value.seoDescription,
      sortWeight: articleForm.value.sortWeight
    };

    let response;
    if (articleForm.value.id) {
      // 更新文章
      response = await api.put(`/api/article/${articleForm.value.id}`, requestData);
    } else {
      // 创建文章
      response = await api.post('/api/article/create', requestData);
    }

    if (response.data.success) {
      ElMessage.success(articleForm.value.id ? '更新成功' : '创建成功');
      articleDialogVisible.value = false;
      searchArticles();
    } else {
      ElMessage.error(response.data.message || '保存失败');
    }
  } catch (error) {
    console.error('保存文章失败:', error);
    ElMessage.error('保存失败，请检查表单信息');
  }
};

// 发布文章
const publishArticle = () => {
  articleForm.value.status = 'published';
  saveArticle();
};

// 查看文章
const viewArticle = (article) => {
  selectedArticle.value = article;
  previewDialogVisible.value = true;
};

// 删除文章
const deleteArticle = async (article) => {
  try {
    await ElMessageBox.confirm(`确定要删除文章"${article.title}"吗？`, '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    const response = await api.delete(`/api/article/${article.id}`);
    
    if (response.data.success) {
      ElMessage.success('删除成功');
      searchArticles();
    } else {
      ElMessage.error(response.data.message || '删除失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除文章失败:', error);
      ElMessage.error('删除失败');
    }
  }
};

// 置顶/取消置顶
const toggleTop = async (article) => {
  try {
    const response = await api.post(`/api/article/${article.id}/top?isTop=${!article.isTop}`);
    
    if (response.data.success) {
      article.isTop = !article.isTop;
      ElMessage.success(article.isTop ? '置顶成功' : '取消置顶成功');
    } else {
      ElMessage.error(response.data.message || '操作失败');
    }
  } catch (error) {
    console.error('设置置顶状态失败:', error);
    ElMessage.error('操作失败');
  }
};

// 推荐/取消推荐
const toggleRecommend = async (article) => {
  try {
    const response = await api.post(`/api/article/${article.id}/recommend?isRecommend=${!article.isRecommend}`);
    
    if (response.data.success) {
      article.isRecommend = !article.isRecommend;
      ElMessage.success(article.isRecommend ? '推荐成功' : '取消推荐成功');
    } else {
      ElMessage.error(response.data.message || '操作失败');
    }
  } catch (error) {
    console.error('设置推荐状态失败:', error);
    ElMessage.error('操作失败');
  }
};

// 批量操作
const handleSelectionChange = (rows) => {
  selectedRows.value = rows;
};

const batchOffline = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要下线的文章');
    return;
  }
  
  try {
    await ElMessageBox.confirm(`确定要下线选中的${selectedRows.value.length}篇文章吗？`, '批量下线确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    // 批量下线逻辑
    for (const article of selectedRows.value) {
      try {
        await api.post(`/api/article/${article.id}/offline`);
      } catch (error) {
        console.error(`下线文章 ${article.id} 失败:`, error);
      }
    }
    
    ElMessage.success('批量下线成功');
    searchArticles();
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量下线失败');
    }
  }
};

const batchDelete = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的文章');
    return;
  }
  
  try {
    await ElMessageBox.confirm(`确定要删除选中的${selectedRows.value.length}篇文章吗？此操作不可恢复！`, '批量删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    });

    const ids = selectedRows.value.map(article => article.id);
    const response = await api.post('/api/article/batch-delete', { ids });
    
    if (response.data.success) {
      ElMessage.success(response.data.message || '批量删除成功');
      searchArticles();
    } else {
      ElMessage.error(response.data.message || '批量删除失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error);
      ElMessage.error('批量删除失败');
    }
  }
};

// 分页处理
const handleSizeChange = (size) => {
  pagination.value.pageSize = size;
  searchArticles();
};

const handleCurrentChange = (page) => {
  pagination.value.currentPage = page;
  searchArticles();
};

// 格式化方法
const formatDateTime = (dateTime) => {
  if (!dateTime) return '';
  return new Date(dateTime).toLocaleString('zh-CN');
};

const getStatusType = (status) => {
  const typeMap = {
    'draft': 'info',
    'published': 'success',
    'offline': 'warning'
  };
  return typeMap[status] || 'info';
};

const getStatusLabel = (status) => {
  const labelMap = {
    'draft': '草稿',
    'published': '已发布',
    'offline': '已下线'
  };
  return labelMap[status] || status;
};

// 获取统计信息
const fetchStatistics = async () => {
  try {
    const response = await api.get('/api/article/statistics');
    
    if (response.data.success) {
      const stats = response.data.data;
      statistics.value = {
        totalArticles: stats.totalArticles || 0,
        publishedArticles: stats.publishedArticles || 0,
        draftArticles: stats.draftArticles || 0,
        totalViews: stats.totalViews || 0
      };
    }
  } catch (error) {
    console.error('获取统计信息失败:', error);
  }
};

// 获取分类列表
const fetchCategories = async () => {
  try {
    const response = await api.get('/api/article/categories');
    if (response.data.success) {
      categories.value = response.data.data;
    }
  } catch (error) {
    console.error('获取分类列表失败:', error);
  }
};

// 组件挂载时加载数据
onMounted(() => {
  fetchCategories();
  searchArticles();
  fetchStatistics();
});
</script>

<style scoped>
.query-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
}

.statistics-row {
  margin-bottom: 20px;
}

.statistics-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.statistics-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(80, 120, 200, 0.12);
}

.statistics-item {
  text-align: center;
  padding: 20px 0;
}

.statistics-number {
  font-size: 28px;
  font-weight: bold;
  color: #4f46e5;
  margin-bottom: 8px;
}

.statistics-label {
  font-size: 14px;
  color: #666;
}

.article-table-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-size: 18px;
  font-weight: bold;
  color: #4f46e5;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.article-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-badge {
  background: #ff6b6b;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.recommend-badge {
  background: #4ecdc4;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}


.el-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
  background: #fff;
}

.el-table th {
  background: #e0e7ff !important;
  color: #4f46e5;
  font-weight: 600;
  font-size: 15px;
}

.el-table tr {
  transition: background 0.2s;
}

.el-table tr:hover > td {
  background: #f1f5ff !important;
}

.el-table .el-button[type="text"] {
  color: #6366f1;
  font-weight: 500;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.el-table .el-button[type="text"]:hover {
  background: #e0e7ff;
  color: #3b3b3b;
}

.el-table .el-button[type="text"].is-top {
  color: #ff6b6b;
}

.el-table .el-button[type="text"].is-recommend {
  color: #4ecdc4;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 20px 0;
}

.article-preview {
  padding: 20px;
}

.article-preview h1 {
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
}

.article-meta {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
  color: #666;
  font-size: 14px;
}

.article-content {
  line-height: 1.8;
  color: #2c3e50;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.el-form-item {
  margin-bottom: 16px;
}

.el-button {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s;
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.el-card {
  border: none;
  transition: all 0.3s;
}

.el-card:hover {
  box-shadow: 0 4px 20px rgba(80, 120, 200, 0.12);
}

.el-tag {
  border-radius: 6px;
  font-weight: 500;
}

.el-select {
  width: 180px;
}

.el-input {
  width: 180px;
}

.el-input[type="textarea"] {
  width: 100%;
}
</style>
